<template> 
    <div class="other-view">
      <div class="other-container">
        <h3 class="section-title">关于本系统</h3>
        <!-- 内容区域 -->
        <div class="content-area">
          <div class="certificate-grid">
            <div class="certificate-item" v-for="(item, index) in certificateList" :key="index" @click="viewCertificate(item)">
              <div class="certificate-image-container">
                <img :src="item.img" :alt="item.title" class="certificate-image">
                <div class="hover-overlay">
                  <el-icon><ZoomIn /></el-icon>
                </div>
              </div>
              <div class="certificate-title">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 图片预览模态框 -->
      <div class="image-preview-modal" v-if="previewVisible" @click.self="closePreview">
        <div class="preview-container">
          <div class="preview-header">
            <h3 class="preview-title">{{ currentImage.title }}</h3>
            <div class="preview-controls">
              <button class="control-btn" @click="rotateImage(-90)" title="向左旋转">
                <el-icon><RefreshLeft /></el-icon>
              </button>
              <button class="control-btn" @click="rotateImage(90)" title="向右旋转">
                <el-icon><RefreshRight /></el-icon>
              </button>
              <button class="control-btn" @click="zoomIn" title="放大">
                <el-icon><ZoomIn /></el-icon>
              </button>
              <button class="control-btn" @click="zoomOut" title="缩小">
                <el-icon><ZoomOut /></el-icon>
              </button>
              <button class="control-btn" @click="resetImage" title="重置">
                <el-icon><Refresh /></el-icon>
              </button>
              <button class="control-btn close-btn" @click="closePreview" title="关闭">
                <el-icon><Close /></el-icon>
              </button>
            </div>
          </div>
          <div class="preview-image-container" @wheel.prevent="handleWheel">
            <img 
              :src="currentImage.img" 
              :alt="currentImage.title" 
              class="preview-image"
              :style="{
                transform: `scale(${scale}) rotate(${rotation}deg)`,
                transition: isTransitioning ? 'transform 0.3s ease' : 'none'
              }"
              @mousedown="startDrag"
              @mousemove="onDrag"
              @mouseup="stopDrag"
              @mouseleave="stopDrag"
              @touchstart="startDrag"
              @touchmove="onDrag"
              @touchend="stopDrag"
            >
          </div>
        </div>
      </div>
    </div>
</template>

<script setup> 
import { ref, onMounted } from 'vue';
import { getCertificateList } from '@/api/config';
import { RefreshLeft, RefreshRight, ZoomIn, ZoomOut, Refresh, Close } from '@element-plus/icons-vue';

// 证书数据
const certificateList = ref([]);

// 预览状态
const previewVisible = ref(false);
const currentImage = ref({ img: '', title: '' });
const scale = ref(1);
const rotation = ref(0);
const isTransitioning = ref(true);
const isDragging = ref(false);
const dragStart = ref({ x: 0, y: 0 });
const dragOffset = ref({ x: 0, y: 0 });

// 查看证书详情 - 使用自定义预览模式
const viewCertificate = (item) => {
  currentImage.value = item;
  scale.value = 1;
  rotation.value = 0;
  dragOffset.value = { x: 0, y: 0 };
  previewVisible.value = true;
  
  // 禁止背景滚动
  document.body.style.overflow = 'hidden';
};

// 关闭预览
const closePreview = () => {
  previewVisible.value = false;
  
  // 恢复背景滚动
  document.body.style.overflow = '';
};

// 缩放图片
const zoomIn = () => {
  isTransitioning.value = true;
  scale.value = Math.min(scale.value + 0.25, 3);
};

const zoomOut = () => {
  isTransitioning.value = true;
  scale.value = Math.max(scale.value - 0.25, 0.5);
};

// 旋转图片
const rotateImage = (degrees) => {
  isTransitioning.value = true;
  rotation.value = (rotation.value + degrees) % 360;
};

// 重置图片
const resetImage = () => {
  isTransitioning.value = true;
  scale.value = 1;
  rotation.value = 0;
  dragOffset.value = { x: 0, y: 0 };
};

// 鼠标滚轮缩放
const handleWheel = (e) => {
  e.preventDefault();
  isTransitioning.value = false;
  
  if (e.deltaY < 0) {
    // 向上滚动，放大
    scale.value = Math.min(scale.value + 0.1, 3);
  } else {
    // 向下滚动，缩小
    scale.value = Math.max(scale.value - 0.1, 0.5);
  }
};

// 拖动图片
const startDrag = (e) => {
  if (scale.value <= 1) return;
  
  isDragging.value = true;
  isTransitioning.value = false;
  
  // 处理鼠标事件和触摸事件
  if (e.type === 'mousedown') {
    dragStart.value = { x: e.clientX, y: e.clientY };
  } else if (e.type === 'touchstart') {
    dragStart.value = { x: e.touches[0].clientX, y: e.touches[0].clientY };
  }
};

const onDrag = (e) => {
  if (!isDragging.value) return;
  
  let currentX, currentY;
  
  // 处理鼠标事件和触摸事件
  if (e.type === 'mousemove') {
    currentX = e.clientX;
    currentY = e.clientY;
  } else if (e.type === 'touchmove') {
    currentX = e.touches[0].clientX;
    currentY = e.touches[0].clientY;
    e.preventDefault(); // 防止页面滚动
  }
  
  // 计算拖动偏移量
  const deltaX = currentX - dragStart.value.x;
  const deltaY = currentY - dragStart.value.y;
  
  dragOffset.value = {
    x: dragOffset.value.x + deltaX,
    y: dragOffset.value.y + deltaY
  };
  
  dragStart.value = { x: currentX, y: currentY };
};

const stopDrag = () => {
  isDragging.value = false;
};

// 获取证书列表
onMounted(async () => {
  const res = await getCertificateList();
  certificateList.value = res.data;
});
</script>

<style lang="less" scoped>
.other-view {
  display: flex;
  flex-direction: column;
  position: relative;
  
}

.other-container {
  flex: 1;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-weight: 600;
  font-size: 24px;
  position: relative;
  padding-bottom: 15px;
}

.section-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #3f51b5, #5c6bc0);
  border-radius: 3px;
}

.content-area {
  background-color: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(63, 81, 181, 0.1);
}

.certificate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.certificate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #eee;
}

.certificate-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(63, 81, 181, 0.15);
  border-color: rgba(63, 81, 181, 0.2);
}

.certificate-image-container {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 15px;
  border: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  position: relative;
  cursor: pointer;
}

.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(63, 81, 181, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  font-size: 24px;
}

.certificate-image-container:hover .hover-overlay {
  opacity: 1;
}

.certificate-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  display: block;
}

.certificate-item:hover .certificate-image {
  transform: scale(1.05);
}

.certificate-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-align: center;
  margin-top: 10px;
  transition: color 0.3s ease;
}

.certificate-item:hover .certificate-title {
  color: #3f51b5;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .certificate-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
  }
  
  .certificate-image-container {
    height: 140px;
  }
  
  .content-area {
    padding: 20px;
  }
  
  .certificate-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .certificate-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  
  .certificate-image-container {
    height: 120px;
  }
  
  .certificate-item {
    padding: 10px;
  }
  
  .section-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

/* 弹窗样式 */
:deep(.certificate-dialog) {
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  
  .el-message-box__header {
    background: linear-gradient(135deg, #3f51b5, #5c6bc0);
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
  }
  
  .el-message-box__title {
    color: white;
    font-weight: 500;
  }
  
  .el-message-box__headerbtn .el-message-box__close {
    color: white;
  }
  
  .el-message-box__content {
    padding: 20px;
    max-height: calc(80vh - 120px);
    overflow-y: auto;
  }
  
  .el-button--primary {
    background: linear-gradient(135deg, #3f51b5, #5c6bc0);
    border-color: #3f51b5;
  }
  
  @media (max-width: 768px) {
    max-width: 95vw;
    
    .el-message-box__header {
      padding: 12px 15px;
    }
    
    .el-message-box__content {
      padding: 15px;
    }
  }
}
/* 图片预览模态框样式 */
.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.preview-container {
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px 8px 0 0;
  margin-bottom: 10px;
}

.preview-title {
  color: white;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.preview-controls {
  display: flex;
  gap: 10px;
}

.control-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 18px;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.close-btn {
  background: rgba(255, 0, 0, 0.3);
}

.close-btn:hover {
  background: rgba(255, 0, 0, 0.5);
}

.preview-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: grab;
  transform-origin: center center;
}

.preview-image:active {
  cursor: grabbing;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .preview-container {
    width: 100%;
    height: 100%;
  }
  
  .preview-header {
    padding: 10px;
  }
  
  .control-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .preview-title {
    font-size: 16px;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
